<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表叶琪</title>
    <style>
        ul.a{
            list-style: circle;
        }
        ul.b{
            list-style: square;
        }
        ol.c{
            list-style: upper-roman;
        }
        ol.d{
            list-style: lower-alpha;
            list-style-image: url('img/p6.jpg');
        }
        /* 简写 */
        ul.a{
            list-style:square url("img/p5.jpg")
        }
    </style>
</head>
<body>
    <p>无序列表实例:</p>

    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>有序列表实例:</p>
    
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>  
</body>
</html>